<template>
  <el-container>
    <el-header>
      后台主页面
      <el-button @click="logout">退出</el-button>
      <div class="menus">
        <div
          @click="current = k"
          :class="{active: k==current}"
          v-for="(v,k) in menus"
          :key="v.id"
        >
          {{v.title}}
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <!-- 二级按钮 -->
        <div
          :key="v.id"
          v-for="v in menus[current].children"
        >
          {{v.title}}
          <!-- 三级按钮 -->
          <div
            v-for="v1 in v.children"
            :key="v1.id"
          >
            <router-link :to="{name: menus[current].menu_url + '_' + v.menu_url + '_' + v1.menu_url}">{{'-----' + v1.title}}</router-link>
          </div>
        </div>
      </el-aside>
      <!-- 右侧 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { getMenus } from '../api'
export default {
  data() {
    return {
      menus: [],
      current: 0 // 当前每几个是选中的
    }
  },
  methods: {
    logout() {
      // 退出
      // 1. 清空本地存储
      sessionStorage.clear()
      // 2. 清空 Vuex 中的数据
      this.$store.commit('set_user', null)
      // 3. 跳转到登录
      this.$router.push({ name: 'Login' })
    }
  },
  created() {
    getMenus().then(res => {
      this.menus = res
    })
  }
}
</script>

<style>
.menus {
  display: flex;
  justify-content: space-between;
}
.active {
  color: #f00;
}
</style>
